import React, { useState } from 'react'
import { NavBar, Space, Toast, Button } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import { Collapse } from 'antd-mobile'
import { Tag } from 'antd-mobile'
import { Steps } from 'antd-mobile'
import { Popup } from 'antd-mobile'

function Index() {
    const ding = useNavigate()
    const { Step } = Steps
    const back = useNavigate()
    const [visible5, setVisible5] = useState(false)

    let { state } = useLocation()
    let getlist = ['经济舱', '头等舱', '商务舱']
    let price = [
        state.lps[0].atp,
        state.lps[0].atp * 2,
        state.lps[0].atp * 3
    ]


    return (
        <div>
            <NavBar onBack={() => back(-1)}>
                2月18日  周二
            </NavBar>

            <div>
                <div className='uu'>
                    <span>{state.dasn}</span>
                    <span>{state.dst}</span>
                    <span>{state.dt}</span>
                    <span>{state.aasn}</span>
                    <span>{state.aat}</span>
                    <span>{state.ast}</span>
                    <span>{state.at}</span>
                    <span style={{ color: 'red' }}>￥{state.lps[0].atp}</span>
                    <span onClick={() => setVisible5(true)}>时刻表</span>
                </div>
            </div>

            <Popup
                visible={visible5}
                onMaskClick={() => {
                    setVisible5(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                    minHeight: '40vh',
                }}
            >
                <div className='ss'>
                    <span>车站名</span><span>到达</span><span>出发</span><span>停留</span>
                </div>
                <div className='ss'>
                    <span>北京南</span><span>--</span><span>6.10</span><span>--</span>
                </div>
                <div className='ss'>
                    <span>天津南</span><span>06.44</span><span>6.46</span><span>2分钟</span>
                </div>
                <div className='ss'>
                    <span>德州东</span><span>7.30</span><span>7.32</span><span>2分钟</span>
                </div>
                <div className='ss'>
                    <span>济南西</span><span>7.56</span><span>7.58</span><span>2分钟</span>
                </div>
                <div className='ss'>
                    <span>曲绕东</span><span>8.30</span><span>8.37</span><span>7分钟</span>
                </div>
                <div className='ss'>
                    <span>徐州东</span><span>9.15</span><span>9.20</span><span>5分钟</span>
                </div>
                <div className='ss'>
                    <span>宿州东</span><span>9.39</span><span>9.45</span><span>6分钟</span>
                </div>
                <div className='ss'>
                    <span>南京南</span><span>10.44</span><span>1.47</span><span>3分钟</span>
                </div>
                <div className='ss'>
                    <span>无锡东</span><span>11.31</span><span>11.33</span><span>2分钟</span>
                </div>
            </Popup>

            <div className='oo'>
                <span>
                    <p>有票方案</p>
                    <p>￥333</p>
                    <p>有票</p>
                </span>
                <span>
                    <p>二等座</p>
                    <p>￥553</p>
                    <p>抢票</p>
                </span>
                <span>
                    <p>一等座</p>
                    <p>￥930</p>
                    <p>仅剩五张</p>
                </span>
                <span>
                    <p>商务座</p>
                    <p>￥1873</p>
                    <p>仅剩八张</p>
                </span>
            </div>

            <div>
                <span>二等座已售空，为您找到一下有票方案</span>
                <p>
                    <Tag color='primary' fill='outline'>
                        补票四站
                    </Tag>"补票至上海虹桥，上车补254元"
                </p>
                <Steps current={2}>
                    <Step title='上车 北京南' />
                    <Step title='二等座' />
                    <Step title='宿州东' status='error' />
                    <Step title='补4站' />
                    <Step title='下车 上海虹桥' />
                </Steps>
                <span>买北京到宿州东的车票，上车后补票到上海虹桥</span>
            </div>

            <div>
                <Collapse accordion
                    accordions={(active) => active ? <Tag color='warning'>收起</Tag> : <Tag color='warning'>预约</Tag>}
                >
                    {
                        getlist && getlist.map((item, index) => (
                            <Collapse.Panel key={item} title={`${item} ${price[index]}`}>
                                <div className='ii'>
                                    <h3 style={{ color: 'orange' }}>￥333</h3>  <Button color='warning' onClick={() => ding('/gou')}>订</Button>
                                </div>
                            </Collapse.Panel>
                        ))
                    }

                </Collapse>
            </div>
        </div>
    )
}

export default Index
